<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item label="资产信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              {{model.assetId_dictText}}
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="资产明细" :labelCol="labelCol" :wrapperCol="wrapperCol">
              {{model.assetSubIds_dictText}}
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="客户信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              {{model.customerId_dictText}}
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="微信信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              {{model.attentionId_dictText}}&ensp;
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="报修时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              {{model.repairDate}}
            </a-form-item>
          </a-col>


          <a-col :span="24">
            <a-form-item label="报修图片" :labelCol="labelCol2" :wrapperCol="wrapperCol2">

              <div v-for="(fileDetail,index) in fileList" :key="index">
                <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                  <div
                    style="width: 100%;height: 100%;position: relative;border: 1px solid #d9d9d9;border-radius: 4px;">
                    <img style="height: 100%; width: 100%" :src="fileDetail" preview="1">
                  </div>
                </div>
              </div>
              <!--              <j-image-upload class="avatar-uploader" text="上传" v-model="fileList" :isMultiple="true" :number = "3" ></j-image-upload>-->
            </a-form-item>
          </a-col>


          <a-col :span="24">
            <a-form-item label="报修标题" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              {{model.repairTitle}}
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="报修内容" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              {{model.repairContent}}
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item label="维修人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true"  v-decorator="['handleUserId', validatorRules.handleUserId]"
                                   dict="sys_user,realname,id"/>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12"  v-if="da.type == 2">
            <a-form-item label="维修金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['money', validatorRules.money]" placeholder="请输入维修金额" style="width: 100%"/>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12" v-if="da.type == 2">
            <a-form-item label="维修时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择维修时间" v-decorator="['feedbackDate']" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>


          <a-col :span="24" v-if="da.type == 2">
            <a-form-item label="维修图片" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <!--              class="avatar-uploader"-->
              <j-image-upload text="上传" v-model="feedbackImageList" :isMultiple="true" :number="3"></j-image-upload>
            </a-form-item>
          </a-col>

          <a-col :span="24" v-if="da.type == 2">
            <a-form-item label="维修内容" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['feedbackContent', validatorRules.feedbackContent]" rows="3"
                          placeholder="请输入维修内容说明"></a-textarea>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>

  import pick from 'lodash.pick'
  import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import { AssetSubMixin } from '@/api/assetSubMixin'
  import { queryRepairImageByMainId, repairHandleUserId, repairFeedback } from '@/api/repair'
  import { getFileAccessHttpUrl } from '@/api/manage'

  export default {
    name: 'RepairInfoOperationModal',
    mixins: [JEditableTableMixin, AssetSubMixin],
    components: {
      JDate,
      JDictSelectTag,
      JImageUpload,
      JSearchSelectTag
    },
    data () {
      return {
        fileList: [],
        feedbackImageList: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        da: {},
        validatorRules: {
          handleUserId: {
            rules: [
              { required: true, message: '请选择维修人员!' }
            ]
          },
          feedbackContent: {
            rules: [
              { required: false, message: '请输入维修内容说明!' }
            ]
          }
        }
      }
    },
    methods: {
      getAllTable () {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      show (title, record, type) {

        this.fileList = []
        this.feedbackImageList = ''
        this.confirmLoading = false
        this.da.type = type
        this.title = title
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.getRepairImage()
        this.validatorRules.feedbackContent.rules[0].required = this.da.type == 2
        // if (this.da.type == 2){
        // } else {
        //   this.validatorRules.feedbackContent = {}
        // }
        // this.selectSub1(this.model.assetId, this.model.assetSubIds)
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'handleUserId'))
        })
      },
      getRepairImage () {
        let that = this
        queryRepairImageByMainId({ id: this.model.id, type: 0 }).then((res) => {
          if (res.success) {
            if (res.result && res.result.length > 0) {
              res.result.forEach((v, i) => {
                that.fileList.push(getFileAccessHttpUrl(v.imageUrl))
              })
            }
          } else {
            that.fileList = []
          }
        }).finally(() => {
          that.$previewRefresh()
        })
      },
      close () {
        this.$emit('close')
        this.visible = false
      },
      handleOk () {
        const that = this
        // if (this.da.type == 1) {
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let formData = Object.assign(this.model, values)
            let url = repairHandleUserId(formData)
            if (that.da.type == 1) {
              url = repairHandleUserId(formData)
            } else if (that.da.type == 2) {
              let repairFeedbackImageList = []
              if (that.feedbackImageList && that.feedbackImageList.split(',') != '') {
                that.feedbackImageList.split(',').forEach((v, i) => {
                  repairFeedbackImageList.push({
                    imageUrl: v,
                    repairId: that.model.id
                  })
                })
              }
              formData.repairFeedbackImageList = repairFeedbackImageList
              url = repairFeedback(formData)
            }
            // console.log('表单提交数据', formData)
            url.then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              // that.close()
            })
          }
        })
        // }
      },
      handleCancel () {
        this.close()
      },
      popupCallback (row) {
        this.form.setFieldsValue(pick(row, 'handleUserId'))
      }

    }
  }
</script>
<!--lang="less"-->
<style lang="less" scoped>
  .ant-form-item {
    margin-bottom: 10px;
  }

  .ant-col {
    min-height: 51px !important;
  }

  /*.ant-form-item span {*/
  /*  position: absolute !important;*/
  /*  min-height: 20px !important;*/
  /*}*/
</style>